<template>
  <div class="login" ref="div">
    <!--topnav-->
    <top-nav :curpages="4"></top-nav>

    <div class="com-middle">
      <!--<img src="../../assets/product/pro-bg.jpg" alt="" class="comm-bg">-->
      <div class="comm-content">
        <h3>理财顾问</h3>

        <div class="consultant">

          <img src="../../assets/consultant/left-banner.jpg" alt="" class="left-img">
          <div class="right-content">
            <ul>
              <li v-for="service in servicerList">
                <div class="cl-head">
                  <img :src="service.headImg ? '/api/file/'+service.headImg : '../images/service.jpg'" alt="">
                </div>
                <div class="cl-info">
                  <p>
                    {{service.name}}
                  </p>
                  <p>
                    从业年限:{{service.years + '年'}}
                  </p>
                  <p>
                    所属区域: {{service.location ? service.location.value : null}}
                  </p>
                  <p>
                    手机号码:{{service.phone}}
                  </p>

                  <p class="star">
                    服务星级:
                    <span v-for="(index,i) in service.starNum">
                                        <img src="../../assets/common/ser-star.png" alt="">
                                    </span>
                  </p>

                </div>
              </li>
            </ul>
          </div>
        </div>
        <mo-paging
          :total="count"
          :page-size="pageSize"
          @change="pageChange">
        </mo-paging>
      </div>

    </div>

    <bottom></bottom>

  </div>
</template>

<script>
  import topNav from '@/components/topNav/topnav'
  import bottom from '@/components/bottom/bottom'
  import {mapActions} from 'vuex'
  import api from '@/utils/api'
  import http from '@/utils/http'
  import MoPaging from '@/components/paginate/paginate'

  export default {
    name: "consultant",
    components: {
      topNav,
      bottom,
      MoPaging
    },
    data() {
      return {
        servicerList: [],//客服列表,
        starNum: [],
        pageSize: 4, //每页显示20条数据
        count: 0 //总记录数
      }
    },
    computed: {

    },
    methods: {
      init(curpage) {
        this.$store.dispatch("Get", {
          url: api.customerService,
          data: {
            page: curpage,
            size: this.pageSize
          }
        }).then((res) => {
          this.count = res.data.totalElements;
          this.servicerList = [];
          res.data.content.map((_data, index) => {
            if (_data.starLevel > 5) {
              _data.starLevel = 5;
            }
            _data.starNum = Array.from({length: _data.starLevel});
            this.servicerList.push(_data);
          });
        })

      },
      //从page组件传递过来的当前page
      pageChange(page) {
        this.currentPage = page;
        this.init(page - 1)
      }
    },
    mounted() {
      this.init(0);
    }
  }
</script>
<style scoped lang="scss">

  .com-middle {
    width: 100%;
    min-width: 1210px;
    background: url(../../assets/product/pro-bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    .comm-content {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      h3 {
        width: 100%;
        height: 65px;
        background: url(../../assets/product/line.png) center no-repeat;
        background-size: 1200px 4px;
        text-align: center;
        color: #ffffff;
        font-size: 42px;
        line-height: 65px;
        margin-top: 110px;
      }
      .consultant {
        width: 996px;
        height: 645px;
        margin: 50px auto;
        background: rgba(255, 255, 255, .6);
        .left-img {
          width: 200px;
          height: 645px;
          float: left;

        }
        .right-content {
          width: 796px;
          height: 100%;
          float: left;

          ul li {
            width: 370px;
            float: left;
            margin: 90px 0 0 25px;
            .cl-head {
              width: 126px;
              height: 177px;
              float: left;
              img {
                display: block;
              }

            }
            .cl-info {
              float: left;
              margin-left: 20px;
              p {
                width: 100%;
                font-size: 18px;
                text-align: left;
                margin-bottom: 12px;
                color: #000000;
              }
              .star {
                margin-top: 16px;
                img{
                  display: inline-block;
                  vertical-align: top;
                }
              }
            }

          }
        }
      }

    }
  }

</style>
